<template>
  <div class="login-container w-full h-full flex_aic_jcc">
    <div class="login-box">
      <div class="right_bg">
        <div class="login_title mb20">
          {{ $t("login.Mira BBC电商管理中心") }}
        </div>
        <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="formData"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
        >
          <el-form-item prop="username" class="mt20">
            <el-input
              v-model="formData.username"
              class="login_input"
              style="width: 300px"
              :placeholder="$t('login.请输入用户名')"
            >
              <template #prefix>
                <img src="@/assets/images/login/user.png" alt="" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password" class="mt20">
            <el-input
              v-model="formData.password"
              type="password"
              class="login_input"
              style="width: 300px"
              :placeholder="$t('login.请输入密码')"
            >
              <template #prefix>
                <img src="@/assets/images/login/psw.png" alt="" />
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="code" class="mt20">
            <div class="flex_aic">
              <el-input
                v-model="formData.code"
                class="login_input flex1"
                style="width: 300px"
                :placeholder="$t('login.请输入验证码')"
              >
                <template #prefix>
                  <img src="@/assets/images/login/code.png" alt="" />
                </template>
                <template #append>
                  <div @click="getAuthCode" class="login_code_box">
                    <img class="login_code" :src="codeImg" alt="" />
                  </div>
                </template>
              </el-input>
            </div>
          </el-form-item>
          <el-button
            type="primary"
            class="login_btn mt40"
            style="width: 300px; height: 40px"
            @click="handleLogin"
            :loading="loading"
            ><span class="fs-20 font-bold">{{
              $t("login.立即登录")
            }}</span></el-button
          >
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import Api from "@/config/api/api";
import Tools from "@/utils/tools";
import { ElMessage } from "element-plus";
import { useI18n} from 'vue-i18n';

const { t } = useI18n();
const router = useRouter();
const ruleFormRef = ref();
const loading = ref(false);
const formData = ref({
  username: "",
});
const rules = ref({
  username: [{ required: true, message: t("login.请输入用户名"), trigger: "blur" }],
  password: [{ required: true, message: t("login.请输入密码"), trigger: "blur" }],
  code: [{ required: true, message: t("login.请输入图形验证码"), trigger: "blur" }],
});
const codeImg = ref("");
const uuid = ref("");
const handleLogin = () => {
  ruleFormRef.value.validate((valid) => {
    if (valid) {
      loading.value = true;
      Api.login({
        username: formData.value.username,
        // password:"tqGPXXXulU+yWcIPPBycq2tHHa1JRd9iGwG13zd/OeEaJ1eBRD66DE46lhNy2jN86027XZAuGutC0zknFrVbew==",
        password: Tools.rsaEncrypt(formData.value.password),
        code: formData.value.code,
        uuid: uuid.value,
      }).then(async (res) => {
        if (res?.data?.user?.loginType == 2) {
          ElMessage.error(t("login.当前账号为商户账号，请使用平台账号登录"));
          getAuthCode();
          return;
        }
        Storage.set("token", res?.data?.token, true);
        Storage.set("user", res?.data?.user, true);
        if (res?.status === 200) {
          getRoles(res?.data?.user?.user?.roles?.[0]?.id)
          const menuRes = await Api.getBuildMenu();
          menuRes.data.sort((a,b)=> a.menuSort - b.menuSort)
          Storage.set("menus", menuRes.data || [], true);
          router.push(getFirstMenu(menuRes.data));
        } else {
          getAuthCode();
        }
      }).finally(() => {
        loading.value = false;
      });
    } else {
      getAuthCode();
    }
  });
};

const getAuthCode = async () => {
  try {
    const res = await Api.authCode({});
    codeImg.value = res?.data?.img || "";
    uuid.value = res?.data?.uuid || "";
  } catch (error) {
    console.log(error);
  }
};

const getFirstMenu = (menu)=>{
  const f = (arr)=>{
    if(arr?.[0]?.path) return arr?.[0]?.path
    if(arr?.[0]?.children?.length){
      return f(arr?.[0]?.children)
    }
  }
  return f(menu) || ""
}

const getRoles = (id)=>{
  Api.getRoleInfo(id).then(res=>{
    if(res.status === 200){
      Storage.set("roles", res?.data?.menus, true)
    }
  })
}

onMounted(() => {
  getAuthCode();
});
</script>

<style scoped lang="scss">
.login-container {
  background-image: url("@/assets/images/login/sld_login_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  .login-box {
    width: 1000px;
    height: 672px;
    background-image: url("@/assets/images/login/sld_login_left.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    .right_bg {
      display: flex;
      position: absolute;
      z-index: 2;
      right: 80px;
      // bottom: 130px;
      flex-direction: column;
      align-items: center;
      justify-content: start;
      width: 410px;
      height: 420px;
      margin-left: -10px;
      // padding: 55px 45px 22px;
      border-radius: 0 6px 6px 0;
      background: #fff;
    }
    .login_title {
      // display: flex;
      // flex-direction: row;
      // align-items: center;
      color: var(--primary-color);
      font-family: MicrosoftYaHei-Bold;
      font-size: 30px;
      font-weight: 700;
      letter-spacing: 2px;
      width: 400px;
      word-break: break-all;
    }

    :deep(.login_input) {
      height: 40px;
      border-radius: 2px;
      .el-input-group__append {
        padding: 0;
      }
    }
    .login_code {
      height: 40px;
      width: 96px;
    }
  }
}
</style>
